<template>
  <div>

    <div class="width-1920 newHeader" v-if="source === 'index'">
      <img src="../assets/image/logo.png" class="logo" @click="goindex">
      <div class="searchBox">
        <input type="text" v-model="searchValue" @input="searchInput($event)" @keyup.enter="search_button">
        <img src="../assets/image/newArrow.png">
      </div>
      <img src="../assets/image/newSearchBtn.png" class="searchIcon" @click="search_button" style="display: block;height: 32px;margin-right: 150px">
      <!-- <span class="icon font_family icon-a-zu92" @click="search_button"></span> -->
      <div class="language">
        <span>旧版</span>
      </div>
      <!-- <span class="icon font_family icon-a-lujing1318"></span> -->

      <span class="icon font_family icon-a-lujing1318" v-if="!islogin"></span>
      <el-dropdown v-else @command="handleCommand">
        <div>
          欢迎：{{ userInfo.nickname }}
        </div>
        <el-dropdown-menu slot="dropdown" style="background-color: #25262E;border-color: #25262E">
          <el-dropdown-item class="user-dorp-item" command="logout">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="width-1920 newCommonHeader" v-else>
      <div class="cont">
        <img src="../assets/image/logo.png" class="logo" @click="goindex">
        <p class="line">|</p>
        <p class="title">{{ headTag[0] }}</p>
        <div class="searchBox">
          <input type="text" v-model="searchValue" @input="searchInput($event)" @keyup.enter="search_button">
          <img src="../assets/image/newArrow.png">
        </div>
        <img src="../assets/image/newSearchBtn.png" class="searchIcon" @click="search_button" style="display: block;height: 32px;margin-right: 150px">
        <!-- <span class="icon font_family icon-a-zu92" @click="search_button"></span> -->
        <!-- <span class="icon font_family icon-a-lujing1318"></span> -->
        <span class="icon font_family icon-a-lujing1318" v-if="!islogin"></span>
        <el-dropdown v-else @command="handleCommand">
          <div>
            欢迎：{{ userInfo.nickname }}
          </div>
          <el-dropdown-menu slot="dropdown" style="background-color: #25262E;border-color: #25262E">
            <el-dropdown-item class="user-dorp-item" command="logout">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <div class="menuBg" v-if="source === 'index'">
      <div class="menuCont">
        <div class="menuItem" v-for="(item, index) in newMenuDatas" :key="index">
          <span class="icon font_family" :class="item.icon"></span>
          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <indexHead :isShowLoginBtn="false" v-else></indexHead>
  </div>
  <!-- <div class="headerBoxOther">
    <div class="conmon_searchBox clearfix">
      <img src="@/assets/image/logo.png" class="conmon_searchPic">
      <img
        class="image_2"
        referrerpolicy="no-referrer"
        src="https://lanhu-oss.lanhuapp.com/psccbafvh3ltakvor4w9b6er3z1lzn69126898b31-712e-4064-9ece-be1fc112e776"
      />
      <span class="text_1">{{headTag[0]}}</span>
      <input type="text" v-model="searchValue" class="conmon_search_input" @input="searchInput($event)" @keyup.enter="search_button">
      <p class="conmon_search_button" @click="search_button">搜索一下</p>
    </div>
    <div class="headerBox">
      <indexHead :isShowLoginBtn="false"></indexHead>
    </div>

  </div> -->
</template>


<script>
import indexHead from './indexhead'
import { mapGetters, mapMutations } from 'vuex'
import loginItem from './login-item'

export default {
  data() {
    return {
      searchValue: '',
      source: '',
      newMenuDatas: [
        {
          name: '热门专题',
          icon: 'icon-a-lujing1682'
        },
        {
          name: '社会民生',
          icon: 'icon-a-lujing1679'
        },
        {
          name: '宏观经济',
          icon: 'icon-a-lujing1676'
        },
        {
          name: '产品价格',
          icon: 'icon-a-lujing1680'
        },
        {
          name: '金融数据',
          icon: 'icon-a-lujing1698'
        },
        {
          name: '行业经济',
          icon: 'icon-a-lujing1677'
        },
        {
          name: '对外贸易',
          icon: 'icon-a-lujing1678'
        },
        {
          name: '区域经济',
          icon: 'icon-a-lujing1674'
        },
        {
          name: '城市经济',
          icon: 'icon-a-lujing1696'
        },
        {
          name: '县域经济',
          icon: 'icon-a-lujing1697'
        },
        {
          name: '乡镇经济',
          icon: 'icon-a-lujing1681'
        },
        {
          name: '世界经济',
          icon: 'icon-a-lujing1675'
        },
        {
          name: '企业数据',
          icon: 'icon-a-lujing1673'
        }
      ],
      islogin: false,
      userInfo: {}

    }
  },
  watch: {
    searchValue(newVal, oldVal) {
      this.setSearchValue(newVal)
    },
    headTag(newVal, oldVal) {
      document.title = newVal[0]
    }
  },
  components: { indexHead, loginItem },
  computed: {
    ...mapGetters({
      breadcrumb: 'getBreadcrumb',
      headTag: 'getHeadTag',
      getSearchValue: 'getSearchValue',
      getUserInfo: 'getUserInfo',
    }),
  },
  mounted() {
    this.userInfo = this.getUserInfo
    localStorage.getItem('TOKEN_KEY') ? this.islogin = true : this.islogin = false
    //把浏览器的title改为test
    document.title = this.headTag[0] || '';
    this.source = this.$route.query.source
    let searchValue = this.getSearchValue
    if (searchValue) {
      this.searchValue = searchValue
    }
  },
  methods: {
    goindex() {
      // this.$router.push({ path: '/index' })
      const url = import.meta.env.VITE_PROXY_INDEX_URL
      window.location.href = url
    },
    ...mapMutations([
      'setSearchValue',
      'getUserInfo'
    ]),
    handleCommand(command) {
      this[command]()
    },
    logout() {
      console.log('logout')
      localStorage.clear()
      window.location.href = import.meta.env.VITE_PROXY_INDEX_URL
    },
    searchInput(e) {
      var val = e.target.value;
      if (!val) return
    },
    search_button() {
      // if (this.searchValue.trim() == '') return
      this.setSearchValue(this.searchValue)
      if (this.$route.name !== 'searchPage') {
        this.$router.push({ name: 'searchPage', query: { source: 'other' } })
        return
      }
      this.$emit('search_button')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


.menuBg {
    height: 60px;
    background: #948482;

    .menuCont {
      padding: 7px 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      box-sizing: border-box;

      .menuItem {
        cursor: pointer;
        border-right: 1px solid #7B6D6C;
        flex: 1;

        .icon {
          font-size: 26px;
          display: block;
        }

        .name {
          font-size: 13px;
          display: block;
          margin-top: 6px;
          font-weight: 600;
        }
      }

      .menuItem:last-child {
        border-right: none;
      }

      .menuItem:hover {
        .icon {
          //color渐变，从上到下为#C80011到#270003
          background: linear-gradient(180deg, #C80011 0%, #270003 100%);
          -webkit-background-clip: text;
          color: transparent;
          -webkit-text-fill-color: transparent;
        }

        .name {
          color: #D82B2C;
        }
      }
    }
  }


.newHeader {
  height: 64px;
  padding: 18px 180px 22px;
  display: flex;
  align-items: center;

  .logo {
    width: 160px;
  }

  .searchBox {
    width: 384px;
    height: 32px;
    background: #948482;
    display: flex;
    margin-left: 278px;
    margin-right: 26px;
    border-radius: 4px;

    input {
      height: 100%;
      flex: 1;
      border: none;
      background: none;
      font-size: 18px;
    }

    img {
      display: block;
      width: 32px;
    }

    .icon {
      display: block;
      color: #D82B2C;
      font-size: 40px;
    }
  }

  .icon-a-zu92 {
    font-size: 32px;
    color: #D82B2C;
    cursor: pointer;
  }

  .language {
    font-size: 17px;
    line-height: 1;
    color: #948482;
    margin-right: 77px;
    cursor: pointer;
    margin-left: auto;

    .line {
      margin: 0 14px;
    }
  }

  .icon-a-lujing1318 {
    font-size: 32px;
    color: #D82B2C;
    cursor: pointer;
  }
}

.newCommonHeader {
  width: 1536px;
  margin: 0 auto;

  .newHeaderPic {
    display: block;
    width: 100%;
  }

  .cont {

    height: 64px;
    padding: 20px 43px 20px 22px;
    display: flex;
    align-items: center;
    color: #948482;

    .logo {
      width: 160px;
      cursor: pointer;
    }

    .line {
      width: 1.6px;
      height: 48px;
      margin: 0 26px;
      background: #948482;
      overflow: hidden;
    }

    .title {
      font-size: 32px;
    }

    .searchBox {
      width: 360px;
      height: 32px;
      background: #948482;
      display: flex;
      margin-left: auto;
      margin-right: 26px;
      border-radius:4px;

      input {
        height: 100%;
        flex: 1;
        border: none;
        background: none;
        font-size: 18px;
      }

      img {
        display: block;
        width: 32px;
      }
    }

    .icon-a-zu92 {
      font-size: 32px;
      color: #D82B2C;
      cursor: pointer;
      margin-right: 222px;
    }


    .icon-a-lujing1318 {
      font-size: 32px;
      color: #D82B2C;
      cursor: pointer;
    }
  }
}

.headerBoxOther .el-menu li .el-submenu__title {
  margin-right: -17px;
}

.headerBoxOther .el-menu-short li .el-submenu__title {
  margin-right: -31px;
}

.text_1 {
  height: 29px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  font-family: SourceHanSansCN-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 38px;
  margin: 4px 0 0 15px;
  float: left;
}

.image_2 {
  float: left;
  margin: 6px 0px 0px 15px;
}

.el-dropdown {
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
